{% extends 'base.html' %}
{% load staticfiles %}
{% load comment_tags %}
{% load likes_tags %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static 'blog/blog.css' %}">
    <script type="text/javascript" src="{% static "ckeditor/ckeditor.js" %}"></script>
{#            <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>#}
{% endblock %}
{#页面标题#}
{% block title %}
    {{ blog.title }}

{% endblock %}
{#页面内容    #}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-10 col-lg-offset-1 "><h3>{{ blog.title }}</h3>
                <ul class="blog-info-description">
                    <li>作者：李子恒</li>
                    <li>
                        分类：
                        <a href="{% url 'blogs_with_type' blog.blog_type.pk %}">
                            {{ blog.blog_type }}
                        </a>
                    </li>
                    <li>发表日期：{{ blog.created_time|date:"Y-m-d" }}</li>
                    {#get_read_num方法是models里的函数名：def get_read_num(self):#}
                    <li>阅读：{{ blog.get_read_num }}</li>
                    <li>评论：{% get_comment_count blog %}</li>

                </ul>
                <div class="blog-content">
                    {{ blog.content |safe }}
                </div>
                {#            样式#}
                {#                <div aria-label="..." id="pager_up">#}
                {#                    <ul class="pager">#}
                {#                        {% if previous_blog %}#}
                {#                            <li>#}
                {#                                <a href="{% url 'blog_datell' previous_blog.pk %}">&laquo;&nbsp;上一篇: {{ previous_blog.title|truncatechars_html:3 }}..</a>#}
                {#                            </li>#}
                {#                        {% else %}#}
                {#                            <li><a href="">没有了</a></li>#}
                {#                        {% endif %}#}
                {##}
                {##}
                {##}
                {#                                <a href="#">Next</a>#}
                {#                    </ul>#}
                {#                </div>#}
                {#                <div aria-label="..." id="pager_down">#}
                {#                    <ul class="pager">#}
                {#                        {% if next_blog %}#}
                {#                            <li>#}
                {#                                <a href="{% url 'blog_datell' next_blog.pk %}">下一篇:{{ next_blog.title|truncatechars_html:3 }}..&nbsp;&raquo;</a>#}
                {#                            </li>#}
                {#                        {% else %}#}
                {#                            <li><a href="">没有了</a></li>#}
                {#                        {% endif %}#}
                {##}
                {##}
                {##}
                {#                                <a href="#">Next</a>#}
                {#                    </ul>#}
                {#                </div>#}

                <div class="like" onclick="likeChange(this,'{% get_content_type blog %}',{{ blog.pk }})">
                    <span class="glyphicon glyphicon-thumbs-up {% get_like_status blog %}"></span>
                    <span class="like-num">{% get_like_count blog %}</span>
                    <span>喜欢</span>
                </div>
                <div class="blog-more">
                    <p>上一篇:
                        {% if previous_blog %}
                            <a href="{% url 'blog_datell' previous_blog.pk %}"> {{ previous_blog.title }}</a>
                        {% else %}
                            没有了
                        {% endif %}
                    </p>
                    <p>
                    <p>下一篇:
                        {% if next_blog %}
                            <a href="{% url 'blog_datell' next_blog.pk %}">{{ next_blog.title }}</a>
                        {% else %}
                            没有了
                        {% endif %}

                    </p>

                </div>
            </div>
        </div>
        {#        评论功能#}
        <div class="row">
            <div class="col-xs-10 col-lg-offset-1">
                <div class="comment-area">
                    <h3 class="comment-area-title">提交评论</h3>
                    {% if user.is_authenticated %}

                        <form id="comment-form" action="{% url 'update_comment' %}" method="POST">
                            {% csrf_token %}
                            <label>{{ user.get_nickname_or_username }},欢迎评论</label>
                            <div id="reply_content_container" style="display: none">
                                <p id="reply_title">回复：</p>
                                <div id="reply_content"></div>
                            </div>
                            {% get_comment_form blog as comment_form %}
                            {% for filed in comment_form %}
                                {{ filed }}
                            {% endfor %}
                            <span id="comment_error" class="text-danger pull-left"></span>


                            {#                            {{ comment_form }}#}

                            <input id="reload" type="submit" class="btn btn-primary pull-right" style="float: right"
                                   value="评论">
                            <script>
                                // Replace the <textarea id="editor1"> with a CKEditor
                                // instance, using default configuration.
                                CKEDITOR.replace('id_text');
                            </script>
                        </form>
                    {% else %}
                        您尚未登录，登录之后可评论。
                        <a href="{% url 'login' %}?from={{ request.get_full_path }}">登录</a>
                        <span>or</span>
                        <a href="{% url 'register' %}?from={{ request.get_full_path }}">注册</a>
                    {% endif %}
                </div>
                <div class="comment-area">
                    <h3 class="comment-area-title">评论列表</h3>
                    <div id='comment_list'>
                        {% get_comment_list blog as comments %}
                        {% for comment in comments %}
                            <div id="root_{{ comment.pk }}" class="comment ">

                                <span>{{ comment.user.get_nickname_or_username }}</span>
                                <span class="glyphicon glyphicon-time">{{ comment.comment_time|date:"Y-m-d H:i:s" }}</span>
                                <div id="comment_{{ comment.pk }}">
                                    {{ comment.text |safe }}
                                </div>
                                <div class="like"
                                     onclick="likeChange(this,'{% get_content_type comment %}',{{ comment.pk }})">
                                    <span class="glyphicon glyphicon-thumbs-up {% get_like_status comment %}"></span>
                                    <span class="like-num">{% get_like_count comment %}</span>

                                </div>
                                <a href="javascript:reply({{ comment.pk }});">回复</a>

                                {% for reply in comment.root_comment.all %}
                                    <div class="reply">
                                        <span>{{ reply.user.get_nickname_or_username }}</span>
                                        <span class="glyphicon glyphicon-time">{{ reply.comment_time|date:"Y-m-d H:i:s" }}:</span>
                                        <span>回复</span>
                                        <span>{{ reply.reply_to.get_nickname_or_username }}:</span>

                                        <div id="comment_{{ reply.pk }}">
                                            {{ reply.text|safe }}
                                        </div>
                                        <div class="like"
                                             onclick="likeChange(this,'{% get_content_type reply %}',{{ reply.pk }})">
                                            <span class="glyphicon glyphicon-thumbs-up {% get_like_status reply %}"></span>
                                            <span class="like-num">{% get_like_count reply %}</span>

                                        </div>
                                        <a href="javascript:reply({{ reply.pk }});">回复</a>
                                    </div>

                                {% endfor %}

                            </div>

                        {% empty %}
                            <span id="no_comment">暂无评论</span>
                        {% endfor %}
                    </div>

                </div>
            </div>
        </div>
    </div>

    {##}
{% endblock %}
{##ajax#}

{% block script_extends %}
    <script type="text/javascript">
        String.prototype.format = function () {
            var str = this;
            for (var i = 0; i < arguments.length; i++) {
                var str = str.replace(new RegExp('\\{' + i + '\\}', 'g'), arguments[i])
            }
            return str;
        };

        //回复
        function reply(reply_comment_id) {
            //设置值


            $("#reply_comment_id").val(reply_comment_id);
            var html = $("#comment_" + reply_comment_id).html();
            $("#reply_content").html(html);
            $("#reply_content_container").show();

            //滚动动画
            $('html').animate({scrollTop: $("#comment-form").offset().top - 60}, 300, function () {
                CKEDITOR.instances['id_text'].focus();
            })

        }

        function numFormat(num) {
            return ('00' + num).substr(-2)
        }

        function timeFormat(timestamp) {
            var datetime = new Date(timestamp * 1000);
            var year = datetime.getFullYear();
            var month = numFormat(datetime.getMonth());
            var day = numFormat(datetime.getDate());
            var hour = datetime.getHours();
            var minute = datetime.getMinutes();
            var second = datetime.getSeconds();
            return year + '-' + month + '-' + day + '-' + hour + ':' + minute + ':' + second;
        }

        $("#comment-form").submit(function () {
            //判断是否为空内容
            $("#comment_error").text('');
            if (CKEDITOR.instances['id_text'].document.getBody().getText().trim() == '') {
                $("#comment_error").text('评论内容不能为空');
                return false;
            }


            //更新数据到textarea
            CKEDITOR.instances['id_text'].updateElement();
            $.ajax({
                url: '{% url 'update_comment' %}',
                type: 'POST',
                data: $(this).serialize(),
                cache: false,
                success: function (data) {
                    console.log(data);
                    if (data['status'] == "SUCCESS") {
                        //插入数据
                        if ($("#reply_comment_id").val() == '0') {
                            //插入评论
                            {#var comment_html = '<div id="root_' + data['pk'] + '" class="comment "> <span>' + data['username'] + '</span> <span class="glyphicon glyphicon-time">' + timeFormat(data['comment_time']) + '</span> <div id="comment_' + data['pk'] + '"> ' + data['text'] + ' </div> <a href="javascript:reply(' + data['pk'] + ');">回复</a></div>';#}

                            var comment_html = '<div id="root_[0}" class="comment ">' +
                                '<span>{1}</span>' +
                                '<span>{2}</span>' +
                                '<div id="comment_{0}">' +
                                '{3}' +
                                '</div>' +
                                '<div class="like" onclick="likeChange(this,\'{4}\',{0})">' +
                                '<span class="glyphicon glyphicon-thumbs-up"></span>' +
                                '<span class="like-num">0</span>' +
                                '</div>' +
                                '<a href="javascript:reply({0});">回复</a>' +
                                '</div>';

                            comment_html = comment_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['text'], data['content_type']);

                            $("#comment_list").prepend(comment_html);
                        } else {
                            //插入回复
                            {#var reply_html = '<div class="reply"> <span>' + data['username'] + '</span> <span class="glyphicon glyphicon-time">' + timeFormat(data['comment_time']) + '</span> <span>回复</span> <span>' + data['reply_to'] + ':</span> <div id="comment_' + data['pk'] + '">' + data['text'] + '</div> <a href="javascript:reply(' + data['pk'] + ');">回复</a> </div>';#}

                            var reply_html = '<div class="reply"> ' +
                                '<span>{1}</span>' +
                                ' <span>{2}:</span>' +
                                '<span>回复</span> ' +
                                '<span>{3}:</span>' +
                                ' <div id="comment_{0}">{4}</div>' +
                                '<div class="like" onclick="likeChange(this,\'{5}\',{0})">' +
                                '<span class="glyphicon glyphicon-thumbs-up\"></span>' +
                                '<span class="like-num">0</span>' +
                                '</div>' +
                                '<a href="javascript:reply({0});">回复</a>' +
                                '</div>';
                            reply_html = reply_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['reply_to'], data['text'], data['content_type']);
                            $("#root_" + data['root_pk']).append(reply_html);


                        }
                        //清空编辑框
                        CKEDITOR.instances['id_text'].setData('');
                        $("#reply_content_container").hide();
                        $("#reply_comment_id").val(0);
                        $('#no_comment').remove();
                        $("#comment_error").text('评论成功');
                    } else {
                        //显示错误信息
                        $("#comment_error").text(data['message']);

                    }

                },
                error: function (xhr) {
                    console.log(xhr);
                }
            });
            return false;
        });

        function likeChange(obj, content_type, object_id) {
            var is_like = obj.getElementsByClassName('active').length == 0
            $.ajax({
                url: "{% url 'like_change' %}",
                type: "GET",
                data: {
                    content_type: content_type,
                    object_id: object_id,
                    is_like: is_like
                },
                cache: false,
                success: function (data) {
                    console.log(data)
                    if (data['status'] == 'SUCCESS') {
                        //更新点赞状态
                        var element = $(obj.getElementsByClassName('glyphicon'));
                        if (is_like) {
                            element.addClass('active');

                        } else {
                            element.removeClass('active');
                        }
                        //更新点赞数量
                        var liked_num = $(obj.getElementsByClassName('like-num'));
                        liked_num.text(data['liked_num']);
                    } else {
                        if (data['code'] == 400) {
                            $('#login_modal').modal('show')

                        } else {
                            alert(data['message']);
                        }

                    }

                },
                error: function (xhr) {
                    console.log(xhr)

                }
            });
        }
        if(window.location.hash){
            $('html').animate({scrollTop: $(window.location.hash).offset().top - 60}, 500);
            $('html').animate({scrollTop: $(window.location.hash).offset().top - 60}, 500);
        }

    </script>

{% endblock %}